<template>
  <div class="fixed" v-dialogDrag>
    <div class="content el-dialog"
         style="padding:0">
      <div class="msgTop msgTop-bg el-dialog__header">
        <span>工单转派</span>
        <i class="el-icon-close fr"
           style="cursor:pointer;line-height:40px;font-size:13px;"
           @click="cancelTransfer"></i>
      </div>
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               class="demo-ruleForm"
               style="padding:20px 20px 0 20px">
        <el-form-item label="处理方："
                      label-width="100px"
                      prop="nodeVal">
          <el-select v-model="ruleForm.nodeVal"
                     placeholder="请选择处理方"
                     clearable
                     @change="changeNodeInfo">
            <el-option v-for="item in formNodes"
                       :key="item.nodeId"
                       :label="item.nodeName"
                       :value="item.nodeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转派方式："
                      label-width="100px"
                      prop="dealMethod">
          <el-radio-group v-model="ruleForm.dealMethod"
                          @change="changeDealMethod">
            <el-radio label="1">节点处理人</el-radio>
            <el-radio label="2">任意处理人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理人："
                      label-width="100px"
                      v-if="ruleForm.dealMethod == '1'"
                      prop="userCurrentType">
          <el-select @change='getUserOptionList'
                     v-model="ruleForm.userCurrentType"
                     filterable
                     clearable
                     disabled
                     placeholder="请选择类型">
            <el-option v-for="item in ruleForm.userTypes"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <!--部门 -->
          <el-cascader v-if="deptShow == 'dept'&& ruleForm.dealMethod == '1'"
                       expand-trigger="hover"
                       :options="ruleForm.userCurrentOptions"
                       placeholder="请选择"
                       filterable
                       :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true,s}"
                       v-model="ruleForm.userOption"
                       @change="handleChange">
          </el-cascader>
          <el-select multiple
                     v-if="deptShow == 'dept'&& ruleForm.dealMethod == '1'"
                     v-model="ruleForm.userOptionDept"
                     filterable
                     clearable
                     placeholder="请选择">
            <el-option v-for="item in ruleForm.userOptionDeptList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <!-- 其他的 -->
          <el-select multiple
                     v-if="deptShow != 'dept'&& ruleForm.dealMethod == '1'"
                     v-model="ruleForm.userOption"
                     filterable
                     clearable
                     placeholder="请添加">
            <el-option v-for="item in ruleForm.userCurrentOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任意处理人："
                      label-width="100px"
                      v-if="ruleForm.dealMethod == '2'"
                      prop="userType">
          <el-select v-model="ruleForm.userType"
                     filterable
                     clearable
                     @change='getUserOptionList'
                     placeholder="请选择类型">
            <el-option v-for="item in ruleForm.userTypes"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-cascader v-if="deptShow == 'dept'&& ruleForm.dealMethod == '2'"
                       expand-trigger="hover"
                       :options="ruleForm.userOptions"
                       placeholder="请选择"
                       filterable
                       :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                       v-model="ruleForm.userOption"
                       @change="handleChange">
          </el-cascader>
          <el-select multiple
                     v-if="deptShow == 'dept' && ruleForm.dealMethod == '2' && itemType==='3'"
                     v-model="ruleForm.userOptionDept"
                     filterable
                     clearable
                     placeholder="请选择">
            <el-option v-for="item in ruleForm.userOptionDeptList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <el-select multiple
                     v-if="deptShow != 'dept'&& ruleForm.dealMethod == '2'"
                     v-model="ruleForm.userOption"
                     filterable
                     clearable
                     placeholder="请添加">
            <el-option v-for="item in ruleForm.userOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="10px"
                      class="center">
          <el-button @click="submitForm('ruleForm')"
                     type="button"
                     class="el-button el-button--primary el-button--medium h30Btn ">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  selectAllType,
  selectAll,
  getNodeHandleUserInfoByNodeId
} from "@/api/workOrderController";

import { getUseListByDepartmentId } from '@/api/userController'
export default {
  props: ['formNodes', 'ruleFormInfo'],
  data () {
    return {
      itemType: window.CONFIG.itemType,
      deptShow: '',
      currentNodeId: '',
      ruleForm: {
        dealMethod: "1",
        nodeVal: "", // 选择的节点流程id
        userType: "", // 一级数据值
        userCurrentType: "", // 节点处理人的一级数据值
        userTypes: [], // 一级数据下拉列表
        // nodeUserTypes: [], // 节点当前处理人一级下拉数据
        userOption: [], // 二级数据值
        userOptions: [], // 二级数据下拉列表
        userCurrentOptions: [], // 节点处理人的二级数据下拉列表
        userOptionDeptList: [],
        userOptionDept: [],
      },
      redeploy: {
        transferShow: false,
        roleType: "",
        targetNodeId: '',
        value: []
      },
      rules: {
        nodeVal: [
          { required: true, message: "请选择节点", trigger: ["blur", "change"] }
        ],
        dealMethod: [{
          required: true, message: "请选择处理方式", trigger: ["blur"]
        }],
        userType: [
          { required: true, message: "请选择转派对象", trigger: ["blur"] }
        ],
        userCurrentType: [
          { required: true, message: "请选择转派对象", trigger: ["blur"] }
        ]
      },
    }
  },
  mounted () {
    this.selectAllType()
  },
  methods: {
    // 获取用户/角色/部门下拉数据
    selectAlllInfoFun (val) {
      if (val === "user") {
        return window.CONFIG.selectAllInfo.userList;
      } else if (val === "role") {
        return window.CONFIG.selectAllInfo.roleList;
      } else if (val === "dept") {
        return window.CONFIG.selectAllInfo.deptList;
      } else if (val === "all") {
        return []
      }
    },
    // 根据节点id获取节点处理人信息
    getCurrentHandler (val) {
      getNodeHandleUserInfoByNodeId(val).then(res => {
        if (res.data.retCode === 200 && res.data.data) {
          this.ruleForm.userCurrentType = res.data.data.assigneetype
          this.ruleForm.userCurrentOptions = res.data.data.assignee
          if (this.ruleForm.userCurrentType === 'dept') {
            this.deptShow = 'dept'
          } else {
            this.deptShow = ''
          }
          // this.ruleForm.userOption = []
          // this.getUserOptionList(this.ruleForm.userCurrentType)
        }
      })
    },
    // 切换方式
    changeDealMethod (val) {
      this.ruleForm.dealMethod = val
      this.ruleForm.userType = ''
      this.ruleForm.userOption = []
      this.ruleForm.userOptionDept = []
      if (val === '1') {
        this.changeNodeInfo(this.ruleForm.nodeVal)
      } else if (val === '2') {
        // 苏农定制字段赋值
        if (window.CONFIG.itemType === '3' && this.ruleFormInfo) {
          let institution = this.ruleFormInfo.institution && this.ruleFormInfo.institution.split(',')
          if (institution && institution.length>0) {
            for (let i = 0; i < institution.length; i++) {
              institution[i] = institution[i].split('/')
            }
          }
          this.deptShow = 'dept'
          this.ruleForm.userType = 'dept'
          this.ruleForm.userOptions = this.selectAlllInfoFun('dept')
          this.ruleForm.userOption = institution
          if (this.ruleForm.userOption.length > 0) {
            this.handleChange()
          }
        }
      }
      // this.changeNodeInfo(this.ruleForm.nodeVal)
    },
    // 获取一级下拉数据
    getUserOptionList (val) {
      this.ruleForm.userOption = []
      this.ruleForm.userOptions = []
      // 争对部门数据打标识
      if (val == 'dept') {
        this.deptShow = 'dept'
      } else {
        this.deptShow = ''
      }
      selectAll(val).then(res => {
        if (!val) {
          this.ruleForm.userOptions = []
          return
        }
        if (res.data.retCode == 200) {
          this.ruleForm.userOptions = res.data.data
        }
      })
    },
    handleChange () {
      this.ruleForm.userOptionDept = []
      this.ruleForm.userOptionDeptList = []
      let params = { departmentIdList: this.ruleForm.userOption }
      if (this.ruleForm.dealMethod === '1') {
        params.nodeId = this.ruleForm.nodeVal
      }
      getUseListByDepartmentId(params).then(res => {
        if (res.data.retCode == 200) {
          this.ruleForm.userOptionDeptList = res.data.data
        }
      })
    },
    // 获取一级数据
    selectAllType () {
      let _this = this
      selectAllType().then(res => {
        if (res.data.retCode === 200) {
          // _this.ruleForm.nodeUserTypes = res.data.data
          _this.ruleForm.userTypes = res.data.data
          // 剔除角色
          let userTypeArr = []
          for (var i = 0; i < _this.ruleForm.userTypes.length; i++) {
            // if (_this.ruleForm.userTypes[i].value != 'role') {
            userTypeArr.push(_this.ruleForm.userTypes[i])
            //  _this.ruleForm.userTypes =  _this.ruleForm.userTypes.splice(i,1)
            // }
          }
          _this.ruleForm.userTypes = userTypeArr
        }
      })
    },
    // 获取节点下的数据
    changeNodeInfo (val) {
      if (!val) {
        this.ruleForm.userType = []
        this.ruleForm.userCurrentType = []
        this.ruleForm.userOption = []
        this.ruleForm.userOptionDept = []
        this.deptShow = ""
      } else {
        if (this.ruleForm.dealMethod === '1') {// 节点处理人 (接口处理)
          this.ruleForm.userOption = []
          this.ruleForm.userOptionDept = []
          this.getCurrentHandler(val)
        } else if (this.ruleForm.dealMethod === '2') { // 任意处理人 (无接口处理)
          // 苏农定制字段赋值
          if (window.CONFIG.itemType === '3' && this.ruleFormInfo) {
            let institution = this.ruleFormInfo.institution.split(',')
            for (let i = 0; i < institution.length; i++) {
              institution[i] = institution[i].split('/')
            }
            this.deptShow = 'dept'
            this.ruleForm.userType = 'dept'
            this.ruleForm.userOption = institution
            this.ruleForm.userOptions = this.selectAlllInfoFun('dept')
            if (this.ruleForm.userOption.length > 0) {
              this.handleChange()
            }
          }
        }
      }
      // if (!(this.ruleForm.dealMethod == '1' && val == (this.ruleFormInfo && this.ruleFormInfo.startNodeDto.nodeId) ? this.ruleFormInfo.startNodeDto.nodeId : '')) {
      //   // getNodeHandleUserInfoByNodeId(val).then(res => {
      //   //   if (res.data.retCode === 200 && res.data.data) {
      //   //     this.ruleForm.userCurrentType = res.data.data.assigneetype
      //   //     this.ruleForm.userCurrentOptions = res.data.data.assignee
      //   //     this.ruleForm.userOption = []
      //   //     this.getUserOptionList(this.ruleForm.userCurrentType)
      //   //   }
      //   // })
      // } else {
      //   this.ruleForm.userCurrentType = []
      //   this.ruleForm.userOption = []
      //   this.ruleForm.userCurrentOptions = []
      //   this.$message({ type: 'error', message: '初始节点未配置节点处理人' })
      // }
    },
    // 关闭弹框
    cancelTransfer () {
      this.$emit('cancelredeployShow', false)
    },
    // 校验
    async submitForm (formName) {
      await this.$refs[formName].validate(valid => {
        if (valid) {
          this.redeploy.redeployShow = false
          this.redeploy.roleType = this.ruleForm.userType || this.ruleForm.userCurrentType
          this.redeploy.targetNodeId = this.ruleForm.nodeVal
          this.redeploy.roleType = (this.redeploy.roleType == 'dept' && this.ruleForm.userOptionDept.length > 0 ? 'user' : this.redeploy.roleType)
          this.redeploy.value = (this.deptShow == 'dept' && this.ruleForm.userOptionDept.length > 0 ? this.ruleForm.userOptionDept : this.ruleForm.userOption)
          this.$emit('redeployShow', this.redeploy)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
}

</script>

<style scoped>
.center {
  text-align: center;
  font-size: 16px;
}

.paging-foot {
  padding: 10px 0;
}

</style>
